<template>
	<view style="position: relative;">
		<view style="position: absolute;left: 0;top: 0;height: 100vh;background-color: #fff;width: 100%;z-index: 99;" v-if="isConte">
			<view class="cropper-choose"  @click="isConte=!isConte">
				关闭
			</view>
			<view class="cropper-choose2">
				相机/存储权限使用说明：用于简历头像上传。
			</view>
			
			<okingtz-cropper @uploadSuccess="uploadSuccess"></okingtz-cropper>
		</view>
		
		<!-- 添加uni-popup组件 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog
				type="info"
				title="相机/存储权限使用说明 "
				content="便于您使用该功能上传您的照片，请您确认授权相机/存储权限？"
				:before-close="true"
				@confirm="confirmUpload"
				@close="closePopup"
			></uni-popup-dialog>
		</uni-popup>
		
		<view class="borde-padd-24">
			
			<view class="tab-anv-conter ">
				<view class="tab-anv-list flex-height-between">
					<view class="title">头像</view>
					<view class="flex-line-height" @click="showPopup">
						<image style="width: 72rpx;height: 72rpx;border-radius: 50%;" :src="userInfoJson.avatar?'https://app.zizijy.com/'+userInfoJson.avatar:avatar"  mode=""></image>
					</view>
					
			</view>
				<view class="tab-anv-list flex-height-between">
					<view class="title">账号</view>
					<view class="flex-line-height">
						<!-- <input type="text" placeholder=""> -->
						<text class="info">{{userInfoJson.account}}</text>
					</view>
				</view>
				<view class="tab-anv-list flex-height-between">
					<view class="title">邮箱</view>
					<view style="display: flex;align-items: center;">
						<input type="text" class="info" v-model="formData.email" placeholder="请输入">
						<image class="img" :src="imgUrl+'/right.png'" mode=""></image>
					</view>
				</view>
				<view class="tab-anv-list flex-height-between">
					<view class="title">姓名</view>
					<view style="display: flex;align-items: center;">
						<input type="text" class="info" v-model="formData.full_name" placeholder="请输入">
						<image class="img" :src="imgUrl+'/right.png'" mode=""></image>
					</view>
				</view>
				<view @click="useredit" class="footerButtom">保存修改</view>
			</view>
		</view>
	</view>
</template>

<script>
	import OkingtzCropper from '@/uni_modules/okingtz-cropper/components/okingtz-cropper/okingtz-cropper'
	import {
		Request
	} from '@/utils/request.js'
	// 引入uni-popup组件
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue'
	
function dataURLtoFile(dataurl, filename) {
    //转成blob
    function dataURLtoBlob(toDataURL) {
        var arr = toDataURL.split(","),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        var blob = null;

        // 解决低版本浏览器没有new Blob()问题
        try {
            blob = new Blob([u8arr], { type: mime });
        } catch (e) {
            var BlobBuilder = window.BlobBuilder = (
                window.BlobBuilder ||
                window.WebKitBlobBuilder ||
                window.MozBlobBuilder ||
                window.MSBlobBuilder
            );

            if (e.name === "TypeError" && BlobBuilder) {
                var builder = new BlobBuilder();
                builder.append(u8arr);
                blob = builder.getBlob(mime);
            }
        }

        return blob;
    } 

    //转成file
    function blobToFile(Blob, fileName) {
        Blob.lastModifiedDate = new Date();
        Blob.name = fileName;
        return Blob;
    }

    // 调用如下
    let bold = dataURLtoBlob(dataurl);
    let file = blobToFile(bold, "fileName");
    
    // 上传file就可以了
    return file;
}

	  export default {
	        components:{
	            //2.使用组件
	            OkingtzCropper,
				uniPopup,
				uniPopupDialog
	        },
			data(){
				return {
					
					msgType: 'info', // 添加msgType属性，用于uni-popup-dialog组件
					isConte:false,
					imgUrl:this.imgUrl,
					userInfoJson:{},
					avatar:require('../../static/21723798284_.pic_hd.png'),
					formData:{
						email:"",
						account:"17600969309",
					}
				}
			},
			onLoad() {
				this.userInfo();
			},
	        methods: {
				// 显示头像上传提示框
				showPopup() {
					// 显示弹窗
					this.$refs.popup.open();
				},
				// 确认上传头像
				confirmUpload() {
					// 设置isConte为true，允许上传头像
					this.isConte = true;
					// 关闭弹窗
					this.$refs.popup.close();
				},
				// 关闭弹窗
				closePopup() {
					// 不做任何操作，只关闭弹窗
					this.$refs.popup.close();
				},
				
				// /api/user/edit
				useredit(){
					Request('/user/edit',{
						...this.formData
					},"post").then((res)=>{
						// this.userInfoJson=res;
						uni.showToast({
						    title:'保存成功'
						})
					})
				},
				userInfo(){
					   Request('/user/info').then((res)=>{
						   this.userInfoJson=res;
						   this.formData={
							   ...res,
						   }
					   })
				},
				// base64ImgtoFile(base64) {
				//   var arr = base64.split(","),
				//     mime = arr[0].match(/:(.\*?);/)[1],
				//     bstr = atob(arr[1]),
				//     n = bstr.length,
				//     u8arr = new Uint8Array(n);
				//   while (n--) {
				//     u8arr[n] = bstr.charCodeAt(n);
				//   }
				//   return new Blob([u8arr], {
				//     type: mime,
				//   });
				// },
				base64ImgtoFile(dataurl) {
				
			       var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
			
			            bstr = atob(arr[1]), n = bstr.length, u8arr =new Uint8Array(n);
			        while(n--) {
			
			            u8arr[n] = bstr.charCodeAt(n);
			
			        }
			        return new Blob([u8arr], { type: mime });
			
			    },
	            // 3.定义自己的回调函数
	            uploadSuccess(tempFilePath){
					console.log(tempFilePath)
					// arr.map(item=>{
					//     // console.log('-----item',item)
					//     const imageUrl =  "data:image/jpeg;base64," +item;
					//     var a1={}
					//     var a2=''
					 
					//     this.filesData.push(a1)
									
					//   })
					// console.log(dataURLtoFile(tempFilePath,'wns'))
					// Request('upload',{
					// 	file:'2222222'
					// },"post").then(res=>{
						
					// })
					uni.uploadFile({
						url: 'https://app.zizijy.com/api/upload', //仅为示例，非真实的接口地址
						filePath:tempFilePath,
						name: 'file',
						formData: {
							'user': 'test'
						},
						header:{
							'Authori-zation':'Bearer '+uni.getStorageSync('token') || '',
							// 'Form-type':url=='v3/contract/buyContract'?'routine':null
						},
						success: (uploadFileRes) => {
							let {data} =JSON.parse(uploadFileRes.data);
							this.userInfoJson.avatar=data.url;
							this.formData.avatar=data.url;
							this.isConte=false;
						}
					});
	            }
	        }
	    }
</script>

<style scoped>
	/* 自定义uni-popup样式 */
	/deep/ .uni-popup .uni-popup__wrapper {
		width: 80%;
		max-width: 600rpx;
		margin: 0 auto;
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	/deep/ .uni-popup-dialog {
		padding: 30rpx;
		border-radius: 16rpx;
	}
	
	/deep/ .uni-dialog-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #0D0E0F;
		padding-bottom: 20rpx;
	}
	
	/deep/ .uni-dialog-content {
		font-size: 28rpx;
		color: #646669;
		padding: 20rpx 0;
	}
	
	/deep/ .uni-dialog-button-group {
		margin-top: 30rpx;
	}
	
	/deep/ .uni-dialog-button {
		border-radius: 8rpx;
	}
	
	.cropper-choose {
	    background-color: rgb(59, 94, 236);
	    color: #FFFFFF;
	    height: 41px;
	    line-height: 41px;
	    border-radius: 4px;
		margin: 0 auto;
	    text-align: center;
	    width: 156px;
	    font-size: 15px;
	    font-weight: 600;
		
	}
	.cropper-choose2{
		height: 41px;
		line-height: 41px;
		text-align: center;
		font-size: 15px;
		font-weight: 600;
		
	}
	.tab-anv-list{
		border-bottom: 1px solid #E1E4E8;
		padding:32rpx 0;
	}
	.tab-anv-list .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.tab-anv-list .img{
		width: 20rpx;
		height: 20rpx;
	}
	.tab-anv-list .info{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		margin-right: 24rpx;
		font-size: 28rpx;
		color: #646669;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}
	.tiTuischu{
		height: 80rpx;
		background: #E26262;
		text-align: center;
		line-height: 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
		margin-top: 20rpx;
	}
	.footerButtom{
		height: 80rpx;
		background: #3B5EEC;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		margin-top: 70rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>